import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import NavDropdown from 'react-bootstrap/NavDropdown';
import Container from 'react-bootstrap/Container';

import logo from './images/logo.png';
import newProject from '../../controllers/new';
import { useNavigate } from "react-router-dom";


interface Input {
    exportLatex: Function,
    goBack: Function,
};


const Header = ({exportLatex, goBack}: Input) => {
    const navigate = useNavigate();
    const makeProject = () => {
        newProject(navigate);
    };

    return (
        <Navbar expand="lg" className="bg-body-tertiary">
            <Container>
                <Navbar.Brand href="/">
                    <img src={logo} alt="pAPer" width="100" />
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav" className="justify-content-end">
                    <Nav className="me-auto">
                        <Nav.Link onClick={makeProject}>Новая статья</Nav.Link>
                        <NavDropdown title="Действия" id="basic-nav-dropdown">
                            {/* <NavDropdown.Item onClick={()=>{goBack()}}>Назад (Ctrl+Z)</NavDropdown.Item>
                            <NavDropdown.Divider /> */}
                            <NavDropdown.Item onClick={()=>{exportLatex()}}>Экспорт в latex</NavDropdown.Item>
                            {/* <NavDropdown.Item>Экспорт в pdf</NavDropdown.Item> */}
                        </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
    );
};

export default Header;